<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 90%;
            margin: 0 auto;
        }

        .choose-wrap {
            display: flex;
            margin: 40px auto;
        }

        .choose {
            display: inline-flex;
            align-items: center;
        }

        .checkbox {
            width: 25px;
            height: 25px;
        }

        .input-wrap {
            position: relative;
            margin-top: 30px;
            padding: 0 40px;
            min-height: 80px;
            border-radius: 10px;
            border: 1px solid #ccc;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .delate {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 30px;
            height: 20px;
            text-align: center;
            background-color: #ccc;
            color: #fff;
            border-top-left-radius: 12px;
            cursor: pointer;
        }

        .input-wrap {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-around;
            padding: 20px 0;
        }

        .txt-area {
            position: relative;
            margin: 0 10px;
        }

        .des {
            position: absolute;
            right: 0px;
            bottom: 4px;
            font-size: 14px;
            padding: 2px 4px;
            background: rgb(243 137 61 / 96%);
            color: #fff;
            border-radius: 4px;
        }

        .createFile,
        .clearData {
            position: fixed;
            left: 20px;
            top: 200px;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            font-size: 14px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            background-color: rgb(235, 118, 118);
            border: 1px solid #ccc;
            color: #fff;
            z-index: 10;
        }

        .createFile {
            top: 320px;
        }

        .clearData {
            top: 260px;
        }

        .addLine-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 0;
            margin-top: 30px;
            border-radius: 10px;
            border: 1px solid #ccc;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            cursor: pointer;
        }

        .addLine {
            height: 50px;
            border: none;
            outline: none;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <input type="text" v-model="pageName" placeholder="请输入页面名称">
        </div>
        <div class="choose-wrap">
            <div class="choose" v-for="item in i18nArr">
                <input class="checkbox" type="checkbox" :id="item.val" :value="item" v-model="checkedNames" />
                <label for="jack">{{item.key}}</label>
            </div>
            <input type="file" @change="getFile" />
        </div>
        <input class="clearData" type="button" @click="clearData" value="清空" />
        <input class="createFile" type="button" @click="createFile" value="生成" />
        <div class="input-wrap" v-for="(line, index) in Lines">
            <div class="delate" @click="delateLine(index)">x</div>
            <div class="txt-area" v-for="item in checkedNames">
                <div class="des">{{item.key}}</div>
                <textarea rows="6" v-model="line[item.val]" cols="30" :placeholder="`输入${item.key}语言`"></textarea>
            </div>
        </div>
        <div class="addLine-wrap" @click="addLine">
            <input class="addLine" type="button" value="+添加下一个词组" />
        </div>
    </div>
    <script src="./vue.global.js"></script>
    <script src="./lang.js"></script>
    <script>
        const { createApp } = Vue
        let noWatch = false
        createApp({
            data() {
                return {
                    pageName: '',
                    Lines: [],
                    checkedNames: [], // 选择需要的语言种类
                    i18nArr: i18nArr,
                }
            },
            methods: {
                createLine() {
                    let obj = {}
                    this.checkedNames
                        .sort((a, b) => a.id - b.id)
                        .forEach((item) => {
                            obj[item.val] = ''
                        })
                    return obj
                },
                addLine() {
                    if (this.checkedNames.length === 0) {
                        alert('请先选择语言种类')
                        return
                    }
                    this.Lines.push(this.createLine())
                },
                createFile() {
                    if (!this.checkedNames.find((e) => e.val === 'zh')) {
                        alert('中文语言必须选择')
                        return
                    }
                    console.log(JSON.stringify(this.Lines))
                    let langs = {}
                    this.checkedNames.forEach((item) => {
                        langs[item.val] = {}
                    })
                    this.Lines.forEach((line) => {
                        let cnKey = line['zh'] // 获取中文项为key
                        Object.keys(line).forEach((k) => {
                            langs[k][cnKey] = line[k]
                        })
                    })
                    console.log(langs);
                    let jsStr = ``
                    Object.keys(langs).forEach((k) => {
                        jsStr += `export const ${k} =` + JSON.stringify(langs[k]) + ';'
                    })

                    download(jsStr, this.pageName)
                },
                delateLine(index) {
                    this.Lines.splice(index, 1)
                },
                clearData() {
                    this.Lines = []
                },
                getFile(e) {
                    const that = this
                    let file = e.target.files[0]
                    var reader = new FileReader()
                    reader.readAsText(file) // 读取文本
                    reader.onload = function() {
                        //读取完成后，数据保存在对象的result属性中
                        let jsStr = this.result
                        let js = parseJsStr(jsStr)
                        noWatch = true // 避免依赖递归造成死循环
                        // 还原出选择的语言选项
                        let values = Object.values(js)

                        that.checkedNames = values.map((lang) => that.i18nArr.find((i) => i.val === lang))
                        let keys = Object.keys(js)
                        if (values.length === 0) return

                        let cols = Object.keys(Object.values(values)[0])
                        if (cols.length === 0) return

                        let tempArr = []
                        for (let i = 0; i < cols.length; i++) {
                            let temp = {}

                            for (let j = 0; j < keys.length; j++) {
                                const row = Object.values(values[j])[i]
                                let key = keys[j]
                                temp[key] = row
                            }
                            tempArr.push(temp)
                        }
                        that.Lines = tempArr
                    }
                },
            },
            watch: {
                checkedNames(val) {
                    if (noWatch) return
                    this.Lines = [this.createLine()]
                },
            },
            mounted() { },
        }).mount('#app')

        function parseJsStr(jsStr) {
            let delateExportWord = jsStr.replace(/export/g, '').replace(/\s/g, '')
            let langs = delateExportWord.split('const').filter(Boolean) // 过滤空格
            let temp = {}
            langs.forEach((e) => {
                let valAndjson = e.split('=')
                let val = valAndjson.shift()
                let jsonStr = valAndjson.join('=')
                jsonStr = jsonStr.substr(0, jsonStr.length - 1) // 去除结束分号
                temp[val] = JSON.parse(jsonStr)
            })
            return temp
        }

        function download(str, fileName = '') {
            var content = 'data:text/javascript;charset=utf-8,' + str
            var a = document.createElement('a')
            var event = new MouseEvent('click')
            a.href = content
            a.download = fileName + '-lang.js'
            a.dispatchEvent(event)
        }
    </script>
</body>

</html>